<template>
  <el-scrollbar height="100%">
    <el-menu
      :default-active="$route.path"
      background-color="#001234"
      text-color="#fff"
      active-text-color="#FAFAFA"
      :router="true"
      :ellipsis="Daside.aside.settings.mode == 1 ? false : true"
      unique-opened
      :collapse="
        Daside.aside.settings.mode == 1
          ? Daside.aside.isCollapse && !Daside.aside.Daside
          : false
      "
      :collapse-transition="false"
      :class="Daside.aside.settings.mode == 1 ? 'mode1' : 'mode2 '"
      :width="Daside.aside.settings.mode == 1 ? '250px' : ' 100%'"
      :mode="Daside.aside.isEllipsis == 1 ? 'vertical' : 'horizontal'"
    >
      <el-menu-item class="logo" index="/test"
        ><img src="/vite.svg" />
        <template #title><span>Dadmin</span></template>
      </el-menu-item>
      <Amenu
        :sub="item"
        v-for="item in Daside.menu"
        :key="item"
      ></Amenu> </el-menu
  ></el-scrollbar>
</template>
<script lang="ts">
export default {
  //   name: "Daside",
};
</script>
<script setup lang="ts">
import { useDaside } from "../../store/Daside";
import Amenu from "./Amenu.vue";
const Daside = useDaside();

//遮罩点击事件
onMounted(() => {
  Daside.initEvent();
});
</script>
<style scoped lang="scss">
.el-scrollbar {
  width: 100%;
}

.mode1 {
  min-height: 100vh;
  user-select: none;
}
.mode2 {
  width: 100%;
  height: 50px;
  overflow: hidden;
  user-select: none;
  .el-menu-item {
    width: min-content;
    min-width: 100px;
  }
  .el-sub-menu {
    width: min-content;
    min-width: 100px;
  }
}
.logo {
  height: 50px;
  font-family: Georgia, serif;
  color: rgb(6, 113, 253);
}
</style>
